import {useEffect} from 'react';
import {connect} from 'react-redux';
import {View, ScrollView} from '@tarojs/components';
import {AtIcon, AtTabs, AtTabsPane} from 'taro-ui';
import {Empty, Loading, Overlay } from '@nutui/nutui-react-taro'
import Order from './orderCard';
import Taro, {useReachBottom} from "@tarojs/taro";

function Orders(props) {
    const {dispatch, recordList = [], current, total, loading} = props;
    console.log('recordList', recordList);
    useEffect(() => {
        dispatch({
            type: 'order/init'
        })
    }, []);

    function changeCurrent(val) {
        dispatch({
            type: 'order/setState',
            payload: {
                current: val
            }
        })
    }
  useReachBottom(() => {
    wx.showToast({title: '正在加载...', icon: 'none'});
    if (recordList.length < total) {
      // wx.showToast({title: '正在加载...', icon: 'none'});
      dispatch({
        type: 'order/loadMore',
      })
    }
  });
  const WrapperStyle = {
    display: 'flex',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  }
    const tabList = [{title: '全部'}, {title: '余额支付'}, {title: '积分支付'}];
    const allList = recordList;
    const moneyPayList = recordList.filter((l) => l.payType === 1);
    const integralPayList = recordList.filter((l) => l.payType === 2);
    return (
        <View className='orders'>
          <AtTabs current={current} tabList={tabList} onClick={(val) => changeCurrent(val)}>
            <AtTabsPane current={current} index={0} className='orderWrap'>
              {
                recordList.length ? <ScrollView
                    scrollY
                    scrollWithAnimation
                    className='orderWrap'
                    enhanced
                    onScrollEnd={(e) => {
                      console.log('onScrollEnd', e);
                      // scrollTop > 0, PullToRefresh 不触发 touchmove 事件。
                      if (e.detail?.scrollTop) {
                        setScrollTop(e.detail?.scrollTop)
                      }
                    }}
                    onScrollToLower={(e) => {
                      console.log('onScrollToLower', e);
                      if (recordList.length < total) {
                        // wx.showToast({title: '正在加载更多数据...', icon: 'none', duration: 1000});
                        Taro.showLoading({
                          title:'正在加载更多订单...',
                          mask:false,
                        })
                        dispatch({
                          type: 'order/loadMore',
                        });
                        if (!loading){
                          Taro.hideLoading()
                        }
                      } else {
                        wx.showToast({title: '已经到底了...', icon: 'none', duration: 1000});
                      }
                    }}
                  >
                    {allList.map((i) => <Order order={i}/>) }
                  </ScrollView> :
                  <Empty description='暂无充电记录'
                         style={{backgroundColor: 'transparent', paddingTop: '100rpx'}}/>
              }
            </AtTabsPane>
            <AtTabsPane current={current} index={1} className='orderWrap'>
              {
                recordList.length && [...recordList].filter((l) => l.payType === 1).length ?
                  <ScrollView
                    scrollY
                    scrollWithAnimation
                    className='orderWrap'
                    enhanced
                    onScrollEnd={(e) => {
                      console.log('onScrollEnd', e);
                      // scrollTop > 0, PullToRefresh 不触发 touchmove 事件。
                      if (e.detail?.scrollTop) {
                        setScrollTop(e.detail?.scrollTop)
                      }
                    }}
                    onScrollToLower={(e) => {
                      console.log('onScrollToLower', e);
                      if (recordList.length < total) {
                        // wx.showToast({title: '正在加载更多数据...', icon: 'none', duration: 1000});
                        Taro.showLoading({
                          title:'正在加载更多订单...',
                          mask:false,
                        })
                        dispatch({
                          type: 'order/loadMore',
                        });
                        if (!loading){
                          Taro.hideLoading()
                        }
                      } else {
                        wx.showToast({title: '已经到底了...', icon: 'none', duration: 1000});
                      }
                    }}
                  >
                    {moneyPayList.map((i) => <Order order={i}/>)}
                  </ScrollView>  :
                  <Empty description='暂无余额支付的充电记录'
                         style={{backgroundColor: 'transparent', paddingTop: '100rpx'}}/>
              }
            </AtTabsPane>
            <AtTabsPane current={current} index={2} className='orderWrap'>
              {
                recordList.length && [...recordList].filter((l) => l.payType === 2).length ?
                  <ScrollView
                    scrollY
                    scrollWithAnimation
                    className='orderWrap'
                    enhanced
                    onScrollEnd={(e) => {
                      console.log('onScrollEnd', e);
                      // scrollTop > 0, PullToRefresh 不触发 touchmove 事件。
                      if (e.detail?.scrollTop) {
                        setScrollTop(e.detail?.scrollTop)
                      }
                    }}
                    onScrollToLower={(e) => {
                      console.log('onScrollToLower', e);
                      if (recordList.length < total) {
                        // wx.showToast({title: '正在加载更多数据...', icon: 'none', duration: 1000});
                        Taro.showLoading({
                          title:'正在加载更多订单...',
                          mask:false,
                      })
                        dispatch({
                          type: 'order/loadMore',
                        });
                        if (!loading){
                          Taro.hideLoading()
                        }
                      } else {
                        wx.showToast({title: '已经到底了...', icon: 'none', duration: 1000});
                      }
                    }}
                  >
                    {integralPayList.map((i) => <Order order={i}/>)}
                  </ScrollView> :
                  <Empty description='暂无积分支付的充电记录'
                         style={{backgroundColor: 'transparent', paddingTop: '100rpx'}}/>
              }
            </AtTabsPane>
          </AtTabs>
          {/*<Overlay visible={loading}>*/}
          {/*  <div className="wrapper" style={WrapperStyle}>*/}
          {/*    <Loading direction="vertical">正在加载更多数据...</Loading>*/}
          {/*  </div>*/}
          {/*</Overlay>*/}
          {/*<View className='orderWrap'>*/}
          {/*    {*/}
          {/*        recordList.length ? [...recordList].map((i) => <Order order={i} />) :*/}
          {/*            <Empty description='暂无充电记录' style={{backgroundColor: 'transparent', paddingTop: '100rpx'}} />*/}
          {/*    }*/}
          {/*</View>*/}
          {/*{*/}
          {/*  recordList.length ? <ScrollView*/}
          {/*      scrollY*/}
          {/*      scrollWithAnimation*/}
          {/*      className='orderWrap'*/}
          {/*      enhanced*/}
          {/*      onScrollEnd={(e) => {*/}
          {/*        console.log('onScrollEnd', e);*/}
          {/*        // scrollTop > 0, PullToRefresh 不触发 touchmove 事件。*/}
          {/*        if (e.detail?.scrollTop) {*/}
          {/*          setScrollTop(e.detail?.scrollTop)*/}
          {/*        }*/}
          {/*      }}*/}
          {/*    >*/}
          {/*      {current === 0 ? allList.map((i) => <Order order={i}/>) : current === 1 ? moneyPayList.map((i) => <Order order={i}/>) :*/}
          {/*        integralPayList.map((i) => <Order order={i}/>)}*/}
          {/*    </ScrollView>:*/}
          {/*    <Empty description='暂无充电记录'*/}
          {/*           style={{backgroundColor: 'transparent', paddingTop: '100rpx'}}/>*/}
          {/*}*/}
        </View>
    )
}

export default connect((
  {
    order,
    loading: {effects: {"order/loadMore": loading = false} = {}} = {},
  } = {}
) => {
    return {
      ...order,
      loading
    }
})(Orders)
